<template>
  <div class="my-produ">
    <!-- Main -->
    <div class="my-produ-nav">
      <SearchTop @search="searchComplex"></SearchTop>
    </div>

    <div class="my-produ-list">
      <el-row class="my-produ-list-box" :gutter="34" type="flex" justify="space-around" style="flex-wrap: wrap;">
        <el-col class="my-produ-list-box-item" style="width: auto;" v-for="item in lists" :key="item.id">
          <div class="produ-item">
            <produ :key="'my-produ-' + item.site_id" :item="item" :produType="'ADMINPRODU'"></produ>
          </div>
        </el-col>
        <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
      </el-row>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="curPage"
      :page-size="pageSize"
      :page-count="totalPage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import Produ from '@/views/child/admin/common/Produ.vue';
  import SearchTop from '@/views/child/admin/common/SearchTop.vue';
  import { LocalStorage } from '@/utils/localstorage.js';
  import { mapActions, mapState } from 'vuex'
  export default {
    setup () {
      return {
        /* 分页 */
        curPage: 1,
        pageSize: 20,
        /* 搜索 */
        options: null,  // h5type,keywords,tags
      }
    },
    components: {
      Produ,
      SearchTop
    },
    computed: {
      ...mapState({
        lists: state =>state.user.myLists,
        listsData: state => state.user.myListsData,
        userid: state => state.user.user.userid,
      }),
      totalPage() {
        return this.listsData.totalPage || 0;
      },
    },
    beforeMount(){
      // get localStorage curPage
      this.curPage = this.getAdminLocalStorage('curPage');
      this.options = this.getAdminLocalStorage('options');

      // searchComplex
      this.searchComplex(
        {
          ...this.options,
        },
        this.curPage,
      );
    },
    methods: {
      ...mapActions({
        getMyLists: "user/getMyLists",
      }),
      /* 翻页 / 数据加载 */
      setAdminLocalStorage(setKey, val) {
        // set admin localStorage
        // 定义 user 专属
        const key = 'admin_' + this.userid;

        // 判断是否存在 admin localStorage
        let adminStorage = LocalStorage.getItem(key);
        if(!adminStorage) adminStorage = {};
        adminStorage[setKey] = val;

        // reset
        LocalStorage.setItem(key, adminStorage);
      },
      getAdminLocalStorage(getKey) {
        // get admin produ curPage
        // 定义 user 专属
        const key = 'admin_' + this.userid;

        // 判断是否存在 admin  localStorage
        let adminStorage = LocalStorage.getItem(key);
        return adminStorage ? adminStorage[getKey] : undefined;
      },

      handleCurrentChange(val) {
        // searchComplex => getMyLists
        this.searchComplex(
          {
            ...this.options,
          },
          val,
        );
      },
      searchComplex(options, curPage, callback) {
        // 0. curPage
        this.curPage = curPage && !isNaN(curPage) ? curPage : 1;
        this.setAdminLocalStorage('curPage', this.curPage);

        // 1. 暂存 options
        this.options = options;
        this.setAdminLocalStorage('options', this.options);

        // 2. getMyLists
        this.getMyLists({
          ...options,
          pageSize: this.pageSize,
          page: this.curPage,
          callback: callback || null,
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/admin-produ.scss';
</style>
